<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <#include "/inc/nav.ftl"/>
    <@nav/>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-body">
                    <button id="btn-add" type="button" class="btn btn-success">添加房间</button>
                    <button id="btn-add-customer" type="button" class="btn btn-success">添加客户</button>
                    <button id="btn-add-orderStatusAndDate" type="button" class="btn btn-success">添加预订日期</button>
                    <button id="btn-edit" type="button" class="btn btn-warning">修改房间</button>
                    <button id="btn-del-customer" type="button" class="btn btn-danger">取消客户</button>
                    <button id="btn-del" type="button" class="btn btn-danger">取消房间预订</button>
                    <button id="btn-clear-cart" type="button" class="btn btn-danger">清空订单</button>
                    <button id="btn-submit-orders" type="button" class="btn btn-info">提交订单</button>
                </div>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">订单列表</div>
                    <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-borderdetailed table-hover" id="list">
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <form role="form">
                                                <div class="col-lg-4">
                                                    <label>入住日期</label>
                                                    <input id="checkin" name="checkin" class="form-control"  onfocus="this.blur()">
                                                    <label>离开日期</label>
                                                    <input id="checkout" name="checkout" class="form-control" onfocus="this.blur()">
                                                </div>
                                                <div class="col-lg-4">
                                                    <label>入住总人数</label>
                                                    <input id="number" name="number" class="form-control" value=""  onfocus="this.blur()">
                                                    <label>房间总数</label>
                                                    <input id="totalQty" name="totalQty" class="form-control" value=""  onfocus="this.blur()">
                                                </div>
                                                <div class="col-lg-4">
                                                    <label>订单状态</label>
                                                    <input id="statusName" name="statusName" class="form-control" onfocus="this.blur()">
                                                    <label>总金额</label>
                                                    <input id="totalPrice" name="totalPrice" class="form-control" value=""  onfocus="this.blur()">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <thead>
                                <tr>
                                    <th>房间类型ID</th>
                                    <th>房间类型</th>
                                    <th>单价</th>
                                    <th>数量</th>

                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                        <!-- /.table-responsive -->

                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Page-Scripts  -->
<script>
    $(document).ready(function() {

        var table = $('#list').DataTable({   //此处list与页面table的id相同
            ajax: '${contextPath}/cart/list',
            language: {
                "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
            },
            columns: [
                {"data": "roomTypeId"},
                {"data": "roomTypeName"},
                {"data": "price"},
//                {"data": "discount"},
                {"data": "qty"}
            ],
            responsive: true,
            select: true //datatables select 插件
        });
        $.ajax({
            type: "get",
            url: "${contextPath}/cart/list",
            dataType: "json",
            success: function(json) {
                if (!json.result) {
                    layer.msg(json.msg, {
                        time: 1000,
                        icon: 2
                    });
                }else{
                    $("#totalPrice").val(json.orders.totalPrice);
                    $("#totalQty").val(json.orders.totalQty);
                    $("#number").val(json.orders.number);
                }
                $("#statusName").val(json.orderStatus.statusName);
                $("#checkin").val(json.checkDate[0]);
                $("#checkout").val(json.checkDate[1]);
    //                    initSelector();
    //                    function initSelector() {
    //                        var selector = $("#orderStatus");
    //                        selector.append("<option value='" + json.orderStatus.id + "'>" + json.orderStatus.statusName + "</option>");
    //                        selector.append("<option value='-1'>选择餐桌</option>");
    //                        $.each(json.orderStatus, function(i, orderStatus) {
    //                            selector.append("<option value='" + orderStatus.id + "'>" + orderStatus.statusName + "</option>");
    //                        });
    //                    }
            },
            error: function() {
                layer.msg('系统出错!', {
                    time: 1000,
                    icon: 2
                });
            }
        });
        /* 添加房间按钮 */
        $('#btn-add').click(function() {
            layer.open({
                type: 2,
                title: "添加房间",
                area: ['400px', '400px'],
                fixed: false, //不固定
                maxmin: true,
                content: '${contextPath}/cart/view_addRoomType',
                end: function (index) {
                    parent.location.reload();
                }
            });
        });
        /* 添加客户按钮 */
        $('#btn-add-customer').click(function() {
                layer.open({
                    type: 2,
                    title: "添加客户信息",
                    area: ['600px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/cart/view_addCustomer',
                    end: function(index) {
                        parent.location.reload();
                    }
                });
        });
        /* 取消客户按钮 */
        $('#btn-del-customer').click(function() {
                layer.open({
                    type: 2,
                    title: "取消客户",
                    area: ['600px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/cart/view_detailCustomer',
                    end: function(index) {
                        parent.location.reload();
                    }
                });
        });
        /* 取消房间预订按钮 */
        $('#btn-del').click(function() {
            var rowData = table.rows({
                selected: true
            }).data().toArray();
            if (rowData.length == 1) {
                var id = rowData[0].roomTypeId;
                $.ajax({
                    type: "get",
                    url: "${contextPath}/cart/removeRoomType?roomTypeId=" + id,
                    dataType: "json",
                    success: function (json) {
                        if (!json.result) {
                            layer.msg(json.msg, {
                                time: 1000,
                                icon: 2
                            });
                        } else {
                            layer.msg(json.msg, {
                                time: 1000,
                                icon: 1,
                                end:function(index){
                                    parent.location.reload();
                                }
                            });
                        }
                    },
                    error: function () {
                        layer.msg('系统出错!', {
                            time: 1000,
                            icon: 2
                        });
                    },

                });
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                }); //layer弹出层，1000代表1秒后关闭。7为图标编号
            }
        });
        /* 修改房间按钮 */
        $('#btn-edit').click(function() {
            var rowData = table.rows({
                selected: true
            }).data().toArray();
            if (rowData.length == 1) {
                var roomTypeId = rowData[0].roomTypeId;
                layer.open({
                    type: 2,
                    title: "修改房间",
                    area: ['400px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/cart/view_updateCart?roomTypeId=' + roomTypeId,
                    end: function(index) {
                        parent.location.reload();
                    }
                });
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                });
            }
        });
        /* 清空订单按钮 */
        $('#btn-clear-cart').click(function() {

            layer.msg('你确定清空该订单吗?', {
                time: 0,
                title: "清空订单",
                success: function (layero, index) {
                    function fn(event) {
                        if (event.keyCode === 27) {
                            layer.close(index)
                        }
                        if (event.keyCode === 13) {
                            $('.layui-layer-btn0').click();
                        }
                    }

                    $(window).one('keydown', fn);
                },
                area: ['300px', '150px'],
                fixed: false, //不固定
                btn: ['确定', '取消'],
                yes: function (index) {
                    $.ajax({
                        type: "post",
                        url: "${contextPath}/cart/clearCart",
                        dataType: "json",
                        success: function(data) {
                            if (data.result) {
                                layer.msg(data.msg, {
                                    time: 1000,
                                    icon: 1
                                });
                                parent.location.reload();
                            }
                        },
                        error: function() {
                            layer.msg('系统出错!', {
                                time: 1000,
                                icon: 2
                            });
                        }
                    });
                    layer.close(index);
                }
            });
        });


        /* 提交订单按钮 */
        $('#btn-submit-orders').click(function() {
            $.ajax({
                    type: "get",
                    url: "${contextPath}/cart/submitOrders",
                    dataType: "json",
                    success: function (json) {
                        if (!json.result) {
                            layer.msg(json.msg, {
                                time: 1000,
                                icon: 2
                            });
                        } else {
                            layer.msg(json.msg, {
                                time: 1000,
                                icon: 1,
                                end:function(index){
                                    parent.location.reload();
                                }
                            });
                        }
                    },
                    error: function () {
                        layer.msg('系统出错!', {
                            time: 1000,
                            icon: 2
                        });
                    },

            });
        });
        /* 添加入离日期按钮 */
        $('#btn-add-orderStatusAndDate').click(function() {

                layer.open({
                    type: 2,
                    title: "提交订单",
                    area: ['400px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/cart/view_addOrderStatusAndDate',
                    end: function(index) {
                        parent.location.reload()
                    }
                });

        });


    });
</script>


</body>

</html>